<template>
  <el-row :gutter="15" class="function-cards mb-6">
    <el-col :sm="24" :md="8" class="col-item">
      <div class="func-card department-card" @click="goTarget('/department')">
        <div class="card-content">
          <div class="card-icon">
            <i class="fas fa-clinic-medical text-2xl"></i>
          </div>
          <div class="card-info">
            <h2 class="card-title">科室信息</h2>
            <p class="card-desc">查看各科室详情、医生信息及出诊安排</p>
          </div>
        </div>
        <div class="card-footer">
          查看详情 <i class="fas fa-angle-right ml-1"></i>
        </div>
      </div>
    </el-col>

    <el-col :sm="24" :md="8" class="col-item">
      <div class="func-card reservation-card" @click="goTarget('/reservation')">
        <div class="card-content">
          <div class="card-icon">
            <i class="fas fa-calendar-check text-2xl"></i>
          </div>
          <div class="card-info">
            <h2 class="card-title">预约挂号</h2>
            <p class="card-desc">在线预约挂号，减少排队等待时间</p>
          </div>
        </div>
        <div class="card-footer">
          立即预约 <i class="fas fa-angle-right ml-1"></i>
        </div>
      </div>
    </el-col>

    <el-col :sm="24" :md="8" class="col-item">
      <div class="func-card prescription-card" @click="goTarget('/prescription')">
        <div class="card-content">
          <div class="card-icon">
            <i class="fas fa-file-prescription text-2xl"></i>
          </div>
          <div class="card-info">
            <h2 class="card-title">电子处方打印</h2>
            <p class="card-desc">查询并打印您的电子处方单</p>
          </div>
        </div>
        <div class="card-footer">
          打印处方 <i class="fas fa-angle-right ml-1"></i>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
function goTarget(url) {
  window.open(url, '_blank')
}
</script>

<style scoped lang="scss">
.function-cards {
  .func-card {
    height: 100%;
    border-radius: 6px;
    padding: 20px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .card-content {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .card-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
      }

      .card-info {
        .card-title {
          font-size: 22px;
          font-weight: bold;
          margin: 0 0 5px 0;
          color:#000;
        }

        .card-desc {
          font-size: 14px;
          opacity: 0.9;
          margin: 0;
        }
      }
    }

    .card-footer {
      font-size: 14px;
      display: flex;
      align-items: center;
      opacity: 0.9;
    }
  }

  .department-card {
    background-color: #4e89ff;
  }

  .reservation-card {
    background-color: #52c41a;
  }

  .prescription-card {
    background-color: #fa8c16;
  }
}
</style>